<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org" xmlns:c="http://www.w3.org/1999/XSL/Transform">

<div class="content-wrapper" style="min-height: 901px;" th:fragment="user-list">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            用户管理
            <small>advanced tables</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Tables</a></li>
            <li class="active">Data tables</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">用户列表</h3>
                    </div>
                    <div class="box-header">
                        <table class="table table-bordered col-sm-7">
                            <tbody>
                            <tr>
                                <td>
                                    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                                        添加用户
                                    </button>
                                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                        &times;
                                                    </button>
                                                    <h4 class="modal-title" id="myModalLabel">
                                                        用户信息
                                                    </h4>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="box box-primary">
                                                        <!-- /.box-header -->
                                                        <!-- form start -->
                                                        <form role="form">
                                                            <div class="box-body">
                                                                <div class="form-group">
                                                                    <label for="username">用户名</label>
                                                                    <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="password">密码</label>
                                                                    <input type="password" class="form-control" id="password" placeholder="请输入密码">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="phone">手机号</label>
                                                                    <input type="text" class="form-control" id="phone" placeholder="请输入您的手机号码">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="idCard">身份证号</label>
                                                                    <input type="text" class="form-control" id="idCard" placeholder="请输入你的身份证号">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="driverSchool">驾校名称</label>
                                                                    <input type="text" class="form-control" id="driverSchool" placeholder="请输入驾校名称">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="studySubject">考试科目</label>
                                                                    <input type="text" class="form-control" id="studySubject" placeholder="请输入考试科目(以“|”隔开)">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="xfee">缴纳学费</label>
                                                                    <input type="text" class="form-control" id="xfee" placeholder="请输入缴纳的学费">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="vip-time">会员期限</label>
                                                                    <input type="text" class="form-control" id="vip-time" placeholder="请输入会员到期日期(2019-01-22)">
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                                    </button>
                                                    <button type="button" class="btn btn-primary" id="adduser">
                                                        提交更改
                                                    </button>
                                                </div>
                                            </div><!-- /.modal-content -->
                                        </div><!-- /.modal -->
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>


                    <!-- /.box-header -->
                    <div class="box-body">
                        <div id="example2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                            <div class="row">
                                <div class="col-sm-6"></div>
                                <div class="col-sm-6"></div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <table id="example2" class="table table-bordered table-hover dataTable" role="grid"
                                           aria-describedby="example2_info">
                                        <thead>
                                        <tr role="row">
                                            <th>ID</th>
                                            <th>用户名</th>
                                            <th>手机号</th>
                                            <th>身份证</th>
                                            <th>驾校名称</th>
                                            <th>学习科目</th>
                                            <th>学费</th>
                                            <th>用户角色</th>
                                            <th>是否已删除</th>
                                            <th>会员期限</th>
                                            <th>创建时间</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="user:${users}">
                                            <td class="uuid" th:text="${user.id}"></td>
                                            <td>[[${user.username}]]</td>
                                            <td>[[${user.phone}]]</td>
                                            <td>[[${user.idCard}]]</td>
                                            <td>[[${user.driverSchool}]]</td>
                                            <td>[[${user.studySubject}]]</td>
                                            <td>[[${user.fee}]]</td>
                                            <td>[[${user.role}]]</td>
                                            <td>[[${user.isDelete}]]</td>
                                            <td>[[${user.vipTime}]]</td>
                                            <td th:text="${#dates.format(user.createTime, 'yyyy-MM-dd')}">[[${user.createTime}]]</td>
                                            <td>

                                                <button  type="button" class="btn  btn-success btn-xs" onclick="showUser(this)">查看</button>
                                                <button  data-toggle="modal" data-target="#myModal" type="button" class="btn btn-primary btn-xs"  onclick="editUser(this)" >编辑</button>
                                                <button th:disabled="${user.isDelete} ? false : true" type="button"  class="btn  btn-warning btn-xs delBtn"  onclick="deleteUser(this)">禁用</button>

                                            </td>
                                        </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
    <!--<script th:src="@{/adminlte/bower_components/jquery/dist/jquery.min.js}"></script>-->

    <script type="text/javascript" th:src="@{/adminlte/plugins/layer/layer.js}"></script>
    <script type="text/javascript" src="${}"></script>
    <script>

        $("#adduser").click(function () {
            var data = {
                'username' : $('#username').val(),
                'password' : $('#password').val(),
                'phone' : $('#phone').val(),
                'idCard' : $('#idCard').val(),
                'driverSchool' : $('#driverSchool').val(),
                'studySubject' :$('#studySubject').val(),
                'fee' : $('#xfee').val(),
                'vip-time' : $('#vip-time').val()

            };
            $.ajax({
                type: 'POST',
                contentType: "application/json",
                url: "/user/add",
                data: JSON.stringify(data),
                dataType: 'json',
                cache: false,
                success: function(e){

                    if (e.msg){
                        alert($('#username').val()+"添加成功！");
                        window.location.href = "/user/list";
                    }

                }
            });


        });

        function editUser(obj) {
            var id=$(obj).parents("tr").children(".uuid").text();
            $("#adduser").click(function () {
                var data = {
                    'id':id,
                    'username' : $('#username').val(),
                    'password' : $('#password').val(),
                    'phone' : $('#phone').val(),
                    'idCard' : $('#idCard').val(),
                    'driverSchool' : $('#driverSchool').val(),
                    'studySubject' :$('#studySubject').val(),
                    'fee' : $('#xfee').val(),
                    'vip-time' : $('#vip-time').val()

                };
                $.ajax({
                    type: 'PUT',
                    contentType: "application/json",
                    url: "/user/",
                    data: JSON.stringify(data)
                });
                layer.msg('更新成功!', {icon: 6, time: 1000});
                // $('#myModal').modal('hide');
                // $(".modal-backdrop").remove();

            });

        }

        function deleteUser(obj) {
            layer.confirm('确认禁用吗？',function() {
                $.ajax({
                    type: "PUT",

                    contentType: "application/json",

                    url: "/user/",

                    data: JSON.stringify({"id": $(obj).parents("tr").children(".uuid").text(), "isDelete": 0})

                });
                layer.msg('已禁用!', {icon: 5, time: 1000});
                obj.disabled=true;
            });

        }

        function showUser(obj) {
            var id=$(obj).parents("tr").children(".uuid").text();
            $.ajax({
                type: "GET",

                contentType: "application/json",

                url: "/user/show",

                data: {"id":id},

                success:function (nowuser) {
                    alert(nowuser.msg);
                }
            });
        }
    </script>
</div>
